/* This is your custom storybook stylesheet. */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../../../priv/static/assets/salad_ui.css";
@import "./color.css";

/*
 * Put your component styling within the Tailwind utilities layer.
 * See the https://hexdocs.pm/phoenix_storybook/sandboxing.html guide for more info.
 */

@layer utilities {
    * {
        font-family: system-ui;
    }
}

.psb-text-indigo-600,
.group-hover\:psb-text-indigo-600 {
    color: hsl(var(--primary)) !important;
}

@keyframes indeterminate-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-indeterminate-progress {
    animation: indeterminate-progress 1.5s infinite linear;
    background: linear-gradient(
        to right,
        transparent,
        currentColor,
        transparent
    );
    background-size: 200% 100%;
    width: 100%;
}
